<template>
    <section class="Exhibition-box">
        <app-header></app-header>

        <!--背景图-->
        <article class="bg-box">
            <div class="inside">
                <div class="container">
                    <h3>Exhibition Activities</h3>
                    <h4>
                        <p class="clearfix">
                            <i class="iconfont icon-huodong"></i> 公司展会活动
                        </p>
                    </h4>
                </div>
            </div>
        </article>
        <!--中间内容-->
        <div class="main-content">
            <div class="container">
                <a-row :gutter="40">
                    <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="left-box">
                        <a-tabs @change="exhibitionTypeIdChange">
                            <a-tab-pane v-for="(item, index) in aTabPane" :key="item.key" :tab="item.tab">
                                <ul class="tab-content" v-show="!noDataShow">
                                    <li v-for="(item, index) in exhibitionListData" :key="index">
                                        <a-card :title="null" hoverable :loading="exhibitionListLoading">
                                            <a-row>
                                                <article v-if="item.photo">
                                                    <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="img-box">
                                                        <a @click.stop.prevent="goExhibitionOrActivity(item.id, item.activityUrl)" :title="item.title" :alt="item.title">
                                                            <img v-lazy="item.photo" :title="item.title" :alt="item.title" width="100%"/>
                                                        </a>
                                                    </a-col>
                                                    <a-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="content-box clearfix">
                                                        <div class="left">
                                                            <a @click.stop.prevent="goExhibitionOrActivity(item.id, item.activityUrl)" class="webkit-text-overflow-1lines" >| {{ isNull0(item.title) }}</a>
                                                            <p>活动地点：{{ isNull0(item.activityAddress) }}</p>
                                                            <p>活动时间：{{ isNull0(item.activityTime) }}</p>
                                                            <aside class="webkit-text-overflow-3lines">活动简介：{{ isNull0(item.description) }}</aside>
                                                        </div>
                                                        <div class="right">
                                                            <a-button v-ripple type="primary" @click.stop="callMEIQIA">客服咨询</a-button>
                                                            <a-button v-ripple v-if="exhibitionTypeId == '2'">
                                                                <a href="#exhibition-signUp">提交报名</a>
                                                            </a-button>
                                                        </div>
                                                    </a-col>
                                                </article>
                                                <article v-else>
                                                    <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="content-box clearfix">
                                                        <div class="left">
                                                            <a @click.stop.prevent="goExhibitionOrActivity(item.id)" class="webkit-text-overflow-1lines" :title="item.description" :alt="item.description">| {{ isNull0(item.title) }}</a>
                                                            <p>活动地点：{{ isNull0(item.activityAddress) }}</p>
                                                            <p>活动时间：{{ isNull0(item.activityTime) }}</p>
                                                            <aside class="webkit-text-overflow-3lines">活动简介：{{ isNull0(item.description) }}</aside>
                                                        </div>
                                                        <div class="right">
                                                            <a-button v-ripple type="primary" @click.stop="callMEIQIA">客服咨询</a-button>
                                                            <a-button v-ripple v-if="exhibitionTypeId == '2'">
                                                                <a href="#exhibition-signUp">提交报名</a>
                                                            </a-button>
                                                        </div>
                                                    </a-col>
                                                </article>
                                            </a-row>
                                        </a-card>
                                    </li>
                                </ul>
                                <div class="Pagination" style="text-align: center; margin: 30px 0 0 0;">
                                    <a-pagination
                                            :showTotal="total => `共 ${total} 条`"
                                            showQuickJumper
                                            showSizeChanger
                                            :current="pageNumber"
                                            :pageSize="pageSize"
                                            :total="total"
                                            @change="pageNumberChange"
                                            @showSizeChange="pageSizeChange"/>
                                </div>
                                <h5 style="text-align: center; padding: 15px;" v-show="noDataShow">暂未查询到数据！</h5>
                            </a-tab-pane>
                        </a-tabs>

                        <!--展会活动报名框-->
                        <exhibitionsignUp id="exhibition-signUp"></exhibitionsignUp>
                    </a-col>
                    <!--公共页面主体的右侧内容-->
                    <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="right-box">
                        <rightList :msgType="5"></rightList>
                    </a-col>
                </a-row>
            </div>
        </div>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>
    </section>
</template>

<script>
    import Header from '../../components/header.vue';//公共组件——头部
    import exhibitionsignUp from '../../components/exhibitionsignUp.vue';//公共组件——展会活动报名框
    import rightList from '../../components/rightList.vue';//公共组件——页面主体的右侧内容
    import BackTop from '../../components/BackTop.vue';//公共组件——返回顶部

    export default {
        data() {
            return {
                exhibitionTypeId: '2', // tab页标签，展会类型，0：所有，1：历届，2：最近
                //近期、往期展会tab切换数据
                aTabPane: [
                    {
                        tab: '近期展会',
                        key: '2',
                    },
                    {
                        tab: '往期展会',
                        key: '1',
                    }
                ],
                exhibitionListData:[],//展会列表数据

                pageNumber: 1,  //默认显示第一页
                pageSize: 10,   //默认每页显示10条
                total: 0,    //总条数

                exhibitionListLoading: true,//列表加载loading
                noDataShow: false,//展会列表数据——没有数据提示信息是否显示

            }
        },
        metaInfo () {
            return {
                title: '展会活动_华美优胜美国房地产投资公司',
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: '华美优胜展会，华美优胜历届展会，华美优胜以前展会。' },
                    { vmid: 'description', name: 'description', content: '公司参加展会已经成为很多企业市场策划宣传的重要途径，展览也已经成为了一种融合科技、文化的市场经济新现象。我公司欢迎广大美国房产投资者和意向者来我公司展会，愿您满怀期望而来，满意收获而归。华美优胜美国房产投资公司' },
                ],
            }
        },
        computed: {},
        created() {
        },
        mounted() {
            //获取近期、往期展会活动列表数据
            this.getExhibitionData();
        },
        methods: {
            // 近期往期展会活动列表tab切换change事件
            exhibitionTypeIdChange (key) {
                this.exhibitionTypeId = key;
                this.pageNumber = 1;
                this.pageSize = 10;
                this.exhibitionListLoading = true;
                this.getExhibitionData();
            },
            //处理currentPage当前页变动的事件
            pageNumberChange(page, pageSize) {
                // console.log(page, pageSize)
                this.pageNumber = page;
                this.exhibitionListLoading = true;
                this.getExhibitionData();
            },
            //处理pagesize页码大小变动的事件
            pageSizeChange(current, size) {
                // console.log(current, size)
                this.pageNumber = 1;
                this.pageSize = size;
                this.exhibitionListLoading = true;
                this.getExhibitionData();
            },
            // 获取近期、往期展会活动列表数据
            getExhibitionData() {
                this.$get(`/expo/list/${this.exhibitionTypeId}/${this.pageNumber}/${this.pageSize}`,{
                    sort: true,
                }).then(res => {
                    this.exhibitionListLoading = false;
                    if (res.status === 0) {
                        this.exhibitionListData = res.list;
                        this.total = res.total;
                        this.noDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.total = 0;
                        this.noDataShow = true;
                    }
                })
            },
            //根据exhibitionTypeId判断要跳转到往期展会活动详情页还是近期的jQuery切的活动页，展会活动type：1为近期，0为往期
            goExhibitionOrActivity(exhibitionId, activityURL) {
                var open;
                if(this.exhibitionTypeId == '2'){
                    window.open(activityURL);
                }else{
                    this.$router.push({ path: "/ExhibitionDetails", query: { exhibitionId: exhibitionId } });
                }
            },

        },
        components: {
            'app-header': Header,//公共组件——头部
            exhibitionsignUp,//公共组件——展会活动报名框
            rightList,//公共组件——页面主体的右侧内容
            BackTop,//公共组件——返回顶部

        }
    }
</script>

<style lang="less" type="text/less">
    body {
        .Exhibition-box {
            background: #f5f5f5;
            //背景图
            .bg-box {
                background: url(/static/img/ConsultantTeam6.jpg) no-repeat center center;
                background-size: cover;
                padding: 0 !important;
                >.inside {
                    background: rgba(15, 40, 54, 0.6);
                    >.container {
                        padding: 200px 0;
                        text-align: center;
                        >h3 {
                            font-size: 35px;
                            font-family: 'HelveticaNeue-UltraLight', "PingFang SC", 'Microsoft Yahei', Arial, Verdana, sans-serif;
                            font-weight: 100;
                            color: #fff;
                        }
                        >h4 {
                            line-height: 35px;
                            font-size: 30px;
                            padding: 20px 0 30px 0;
                            color: #fff;
                            >p {
                                display: inline-block;
                                >i {
                                    font-size: 30px;
                                    color: #3cd0c5;
                                    float: left;
                                    margin: 0 10px 0 0;
                                }
                            }
                        }
                    }
                }
            }
            .main-content {
                padding: 30px 0;
                > .container {
                    padding: 0;
                    > .ant-row {
                        > .left-box{
                            padding: 0;
                            .ant-tabs-tabpane {
                                position: relative;
                                > .tab-content {
                                    > li {
                                        margin: 20px 0;
                                        background: #fff;
                                        -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                        .ant-card {
                                            border: none;
                                            >.ant-card-body {
                                                padding: 20px;
                                                > .ant-row {
                                                    >article {
                                                        > .img-box {
                                                            > a {
                                                                display: block;
                                                                cursor: pointer;
                                                                > img {
                                                                    width: 100%;
                                                                }
                                                            }
                                                        }
                                                        > .content-box {
                                                            padding: 0 0 0 10px;
                                                            > .left {
                                                                width: calc(~"100% - 100px");
                                                                padding: 0 20px 0 0;
                                                                border-right: 1px solid #e5e5e5;
                                                                > a {
                                                                    font-size: 18px;
                                                                    font-weight: bold;
                                                                    color: #38485a;
                                                                    margin: 10px 0;
                                                                    cursor: pointer;
                                                                    -webkit-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                                    -moz-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                                    -ms-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                                    -o-transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                                    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
                                                                }
                                                                > a:hover {
                                                                    color: #00b8ee;
                                                                }
                                                                > p {
                                                                    margin: 5px 0;
                                                                    font-size: 15px;
                                                                }
                                                                > p:last-of-type {
                                                                    padding: 0 0 10px 0;
                                                                    border-bottom: 1px solid #ccc;
                                                                }
                                                                > aside {
                                                                    margin: 10px 0 0 0;
                                                                    font-size: 15px;
                                                                    text-indent: 0;
                                                                }
                                                            }
                                                            > .right {
                                                                width: 100px;
                                                                padding: 15px 0;
                                                                margin: 30px 0 0 0;
                                                                text-align: right;
                                                                > button {
                                                                    margin: 10px 0;
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    > li:hover {
                                        -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
                                        box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
                                        -webkit-transform: translate3d(0, 0px, -2px);
                                        transform: translate3d(0, 1px, -2px);
                                    }
                                }
                            }

                            .ant-tabs-bar{
                                border-bottom:none;
                                font-size: 20px;
                            }
                            .ant-tabs-nav .ant-tabs-tab{
                                background: #5d5d5d;
                                color: #fff;
                                padding: 12px 30px
                            }
                            .ant-tabs-ink-bar{
                                background:none;
                            }
                            .ant-tabs-nav .ant-tabs-tab-active{
                                background: #e02b1a;
                                border-bottom: 3px solid #2196f3;
                            }

                        }
                        /* 右侧列表——广告轮播位，推荐房源，热门资讯，客户留言 */
                        >.right-box{
                            >.inside {
                                background: #fff;
                                padding: 15px;
                            }
                        }

                    }
                }
            }

        }
    }
</style>
